<template>
    <div>
        <el-dialog v-model="dialogVisible" title="导出明细" width="470px" :before-close="handleClose">
            <div>
                <div class="flex flex-ai-c set-lh">
                    <div class="name">员工名称：</div>
                    <div class="value">{{ filterData.searchText.value || '全部' }}</div>
                </div>
                <div class="flex flex-ai-c set-lh">
                    <div class="name">所属企业：</div>
                    <div class="value">{{ filterData.serveCompanyName.value || '全部' }}</div>
                </div>
                <div class="flex flex-ai-c set-lh">
                    <div class="name">所属项目：</div>
                    <div class="value">{{ filterData.projectName.value || '全部' }}</div>
                </div>
                <div class="flex flex-ai-c set-lh">
                    <div class="name">发薪时间：</div>
                    <div class="value">{{ payTime.value?.length ? `${payTime.value[0]} 至
                                            ${payTime.value[1]}` : '全部' }}</div>
                </div>
                <div v-if="defaultStatus === 1" class="flex flex-ai-c set-lh">
                    <div class="name">领薪时间：</div>
                    <div class="value">{{ filterData.getSalaryTime.value?.length ? `${filterData.getSalaryTime.value[0]} 至
                                            ${filterData.getSalaryTime.value[1]}` : '全部' }}</div>
                </div>
                <div class="flex flex-ai-c">
                    <div class="name">发薪状态：</div>
                    <div class="value">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox :label="1">已领薪</el-checkbox>
                            <el-checkbox :label="0">待领薪</el-checkbox>
                            <el-checkbox :label="2">停止发薪</el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer flex flex-jc-c">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleConfirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { exportRecord } from '@/api/salary'

export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        defaultStatus: {
            type: [String, Number],
            default: '',
        },
        filterData: {
            type: Object,
            default() {
                return {}
            }
        } as any
    },
    emits: ['update:show'],
    data() {
        return {
            dialogVisible: false,
            checkList: [] as any
        }
    },
    computed: {
        payTime() {
            return this.filterData?.payTime
        }
    },
    watch: {
        show(newval) {
            this.dialogVisible = newval
        },
        dialogVisible(newval) {
            this.$emit('update:show', newval)
        },
        defaultStatus: {
            handler(newval: any) {
                this.checkList = [newval]
            },
            immediate: true
        }
    },
    methods: {
        handleClose(done: Function) {
            this.dialogVisible = false
            done()
        },
        createQuery() {
            const query = {} as any
            for (const key in this.filterData) {
                if (this.filterData[key].type === 'dateRange') {
                    query[`begin${this.filterData[key].prop}`] = this.filterData[key].value?.length ? this.filterData[key].value[0] : ''
                    query[`end${this.filterData[key].prop}`] = this.filterData[key].value?.length ? this.filterData[key].value[1] : ''
                } else {
                    query[(this.filterData[key]).prop] = this.filterData[key].value
                }
            }
            return query
        },
        handleConfirm() {
            const query = this.createQuery()
            query.ids = ''
            query.exportQueryStatus = this.checkList.join(',')
            exportRecord(query).then(res => {
                window.location.href =
                    process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    res
                this.$message.success('导出成功！')
                this.dialogVisible = false
            })
        }
    }
})

</script>
<style lang="stylus" scoped>
.name 
    color #3D3D3D
    width 100px
.value
    color #565868
.set-lh
    line-height 40px
</style>